@extends('admin.layouts.master')
@section('css')
<style>
    /*搜索框所在的区域*/
    .main_header{
        float: left;
        margin-top: 8px;
        width:100%;
        height: 100px;
        line-height: 100px;

    }
    .main_header_search{
        float: left;
        width: 155px;
        position: relative;
    }
    .main_header_search input{
        border-radius:6px;
        width: 180px;
        height: 40px;
        border: 0px solid;
    }
    .main_header_search input:hover{
        box-shadow: 0 8px 12px rgba(0,0,0,0.2);
    }
    .icon_fdj{
        z-index: 10;
        top: 40px;
        left:5px;
        position: absolute;
        background: url("{{asset('images/search_icon.png')}}") no-repeat 0 0;
        width: 26px;
        height: 26px;
    }
    .main_header_search input{
        padding-left:45px;
        font-size: 16px;
        color:#ccc;
    }
    /*================*/
    .main_header_add{
        float: right;
        width: 215px;
        height: 100px;
        line-height: 100px;
        text-align: right;

    }
    .add_box {
        float: right;
        width: 90px;
        height: 40px;
        margin-top: 32px;
        background: #fff;
        line-height: 40px;
        cursor: pointer;
        border-radius: 6px;
        margin-left:17px;
    }
    .add_box:hover{
        box-shadow: 0 8px 12px rgba(0,0,0,0.2);
    }

    .add_box img{
        float:left;
        margin-top:6px;
        margin-left:6px;
        width: 28px;
        height: 28px;
        line-height: 40px;
    }
    .add_box span{
        float: left;
        font-size:18px;
        margin-left: 8px;
        color:  #24a7f6;
    }
    /*======主要内容区=====*/
    .main_form{
        float: left;
        width: 100%;
        height: 783px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 8px 12px rgba(0,0,0,0.2);
        padding-bottom: 20px;
        overflow: scroll
    }
    .main_formlist{
        margin-top:30px;
    }
    .main_table{
        width: 94%;
        margin: 0 auto;
        border: 1px solid #B1B1B1;
    }
    .main_table tr{
        height: 50px;
        width: 100%;
    }
    .main_table tr th{
        text-align: center;
        line-height: 50px;
        height: 50px;
        font-size: 20px;
    }

    /*下面的是分页*/
    .fenye{
        margin: 0 auto;
        margin-top:25px;
        width: 94%;
        height: 55px;

    }
    .choose{
        float:right;
    }
    .choose_total{
        float: left;
        border: 0px solid;
        margin-left: 5px;
        background: #fff;
        color: #979797;
        padding: 0px 10px;
        height: 34px;
        line-height: 34px;
        font-size: 15px;
    }
    .choose_num {
        float: left;
        border: 1px solid #979797;
        margin-left: 5px;
    }
    .choose_num input{
        width: 40px;
        text-align: center;
        height: 32px;
        line-height: 30px;
    }
    .choose_btn{
        float: left;
        border-radius: 0px;
        background: #fff;
        border: 1px solid #979797;
        color: #979797;
        margin-left: 5px;
    }
    .btn-primary:hover{
        background:#fff;
        border: 1px solid #ccc;
        color: #ccc;
    }
    /*master引入后显示=====商品分类*/
    .goods_classify{
        background: #393F64;
    }
    .tableall{
        text-align: center;
    }
    .hiddtr{
        display: none;
    }
    .sub_classname ul li{
        display: block;
        text-align: left;
        padding-left: 10px;
    }
    .sub_classname{
        padding-left: 200px;
    }

    .addstyle{
        width: 100%;
        margin: 0 auto;
        padding: 50px;
    }
    #class_info{
        height: 100px;
    }
</style>
@endsection
@section('content')

<div class="main_header clearfix">

    <div class="main_header_search clearfix">

    </div>

    <div class="main_header_add clearfix">
        <div class="add_box" data-toggle="modal" data-target=".bs-example-modal-lg">

            <img src="{{asset('images/add_icon.png')}}" alt="">
            <span >新增</span>
        </div>


    </div>
</div>
<div class="main_form clearfix">
    <!-- 表格 -->
    <div class="main_formlist">
        <table class="table table-bordered main_table">
            <tbody class="tableall">
                <tr>
                    <th>分类id</th>
                    <th>分类名称</th>
                    <th>分类描述</th>
                    <th>操作</th>
                </tr>
                @include('admin.goods_class_part',['goodsClasses'=>getTree(App\Models\GoodsClass::all()->toArray()),'sign'=>'&nbsp;&nbsp;&nbsp;&nbsp;'])
            </tbody>

        </table>
    </div>
    <!-- Large modal -->
    {{--<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>--}}


</div>

<script>
    $('.main').css('height', $(window).height());
    function deleteClass(id, ele) {
        layer.confirm('确认删除？', {
            btn: ['是', '否']
        }, function (index, layero) {
            $.post('/admin/classification/delete', {id: id, type: 0}, function (res) {
                if (res.hasGoods == 1) {
                    layer.confirm('该分类下有商品,如果删除该分类，则该分类下的所有商品都会移动到未分类下，是否删除？', {
                        btn: ['是', '否']
                    }, function () {
                        $.post('/admin/classification/delete', {id: id, type: 1}, function (res) {
                            if (res.status == 0) {
                                layer.msg(res.msg, {icon: 5});
                            } else {
                                var menu = $("tr[tr-id='" + id + "']");
                                $(menu[0]).remove();
                                layer.msg(res.msg, {icon: 1});
                            }
                        });
                    }, function () {
                        layer.closeAll();
                    });
                } else {
                    $.post('/admin/classification/delete', {id: id, type: 1}, function (res) {
                        if (res.status == 0) {
                            layer.msg(res.msg, {icon: 5});
                        } else {
                            var menu = $("tr[tr-id='" + id + "']");
                            $(menu[0]).remove();
                            layer.msg(res.msg, {icon: 1});
                        }
                    });
                }
            });

        });
    }
    function getSubMenu(ele) {
        var id = $(ele).data("id");
        var sub = $("tr[tr-fid='" + id + "']");
        var icon = $("img[icon-id='" + id + "']");
        if ($(sub[0]).css('display') == 'none') {
            $.post("/admin/classification/get_all_children", {"id": id, "display": 1}, function (data) {
                for (index in data) {
                    var subtr = $("tr[tr-id='" + data[index] + "']");
                    console.log('显示');
                    subtr.css('display', '');
                }
                $(icon[0]).attr('src', "{{asset('images/converge.png')}}");
            })
            return;
        }
        $.post("/admin/classification/get_all_children", {"id": id, "display": 0}, function (data) {
            for (index in data) {
                var subtr = $("tr[tr-id='" + data[index] + "']");
                console.log('隐藏');
                subtr.css('display', 'none');
                $(icon[0]).attr('src', "{{asset('images/expand.png')}}");
            }
        })
    }
    </script>
    @if(Session::has('message'))
    <div class="alert alert-info" style="display: none"> {{Session::get('message')}}
    </div>
    <script>
        $(function () {
            setTimeout(function () {
                $(".alert").show();
            }, 500);
            setTimeout(function () {
                $(".alert").hide();
            }, 4000);
        })
    </script>
    @endif
    @endsection
    <div style="display: none" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div style="width: 900px;" class="modal-dialog modal-lg" role="document">
            <div class="modal-content" >
                <div>
                    <form id="addForm" class="addstyle" action="classification/add_class" method="post">
                        <div class="form-group">
                            <label for="class_name">分类名称</label>
                            <input type="text" class="form-control" id="class_name" name="class_name" placeholder="分类名称">
                        </div>
                        <div class="form-group">
                            <label for="class_name">分类代码</label>
                            <input type="text" class="form-control" name="code" placeholder="分类代码">
                        </div>
                        <div class="form-group">
                            <label for="flast_class">上级分类</label>
                            <select name="fid" class="form-control">
                                <option value="0">顶级分类</option>
                                @include('admin.goods_class_option',['goodsClasses'=>$goodsClasses,'sign'=>'&nbsp;&nbsp;&nbsp;&nbsp;'])
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="class_info">分类描述</label>
                            <textarea class="form-control" name="class_info" id="class_info"></textarea>
                        </div>
                        <button id="save" type="button" class="btn btn-default" style="margin-left: 200px;">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @section('js')
    <script>
        $("#save").click(function () {
            $.ajax({
                url: '/admin/classification/add_class',
                dataType: 'json',
                data: $('#addForm').serialize(),
                type: 'post',
                success: function (res) {
                    if (res.status == 0) {
                        layer.msg(res.msg);
                    } else {
                        layer.msg(res.msg, {icon: 1}, function () {
                            location.href = '/admin/classification';
                        });
                    }
                }
            })
        })
    </script>
    @endsection